<template>
	<view class="page-container">
		<view class="box-container">
			<!-- {{orderData}} -->
			<view class="order-cell">
				中山大学附属第六医院职工
				<view class="order-time">
					{{ orderData.date.split('-')[1] + '-' + orderData.date.split('-')[2] }}{{ orderData.mealType }}
				</view>
			</view>

			<view class="order-cell">
				<view class="order-text">{{orderData.address.name}} {{orderData.address.mobile}}</view>
				<view class="order-text">中六知识城院区</view>
			</view>

			<view class="order-cell">
				<view v-for="(item, index) in orderData.products" class="select_box">
					<view class="select-info">
						<view class="info">
							<view class="title">{{ item.name }}
								<view class="status-value">x{{item.count}}</view>
							</view>
						</view>
						<view class="status">
							<view class="price_n">
								<text class="price_i">￥</text>
								<text>{{ item.price }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="order-cell">
				<view class="order-price">
					<view>原价</view>
					<view>￥{{ orderData.totalPrice }}</view>
				</view>
				<view class="order-price">
					<view>优惠</view>
					<view>￥{{ orderData.discount }}</view>
				</view>
				<view class="order-price">
					<view>应付</view>
					<view>￥{{ orderData.deal }}</view>
				</view>
			</view>

			<view class="order-cell">
				<view class="order-price">
					<view>订单号</view>
					<view>{{orderData.orderID}}</view>
				</view>
				<view class="order-price">
					<view>下单时间</view>
					<view>{{ orderData.orderTime }}</view>
				</view>
			</view>

			<view class="order-cell" v-if="orderData.orderStatus==1" style="text-align: center;margin-top: 24px;">
				<tki-barcode ref="barcode" :show="show" :format="format" :cid="cid" :val="val" :unit="unit"
					:opations="opations" :onval="onval" :loadMake="loadMake" @result="barresult" />
			</view>

		</view>
		<view class="box-container-button" v-if="orderData.orderStatus==0">
			<uv-button size="large" color="linear-gradient(to bottom, #167fff, #4b8aff)"
				customStyle="color:#ffffff;fontWeight:500;fontSize:16px" @click="submit">去支付</uv-button>
		</view>

		<view class="box-container-button" v-if="orderData.orderStatus !==0">
			<uv-button size="large" color="linear-gradient(to bottom, #167fff, #4b8aff)"
				customStyle="color:#ffffff;fontWeight:500;fontSize:16px" @click="goBack">返回</uv-button>
		</view>
	</view>
</template>

<script>
	import tkiBarcode from "@/components/tki-barcode/tki-barcode.vue"
	export default {
		components: {
			tkiBarcode
		},
		data() {
			return {
				orderData: {}, // 在 data 中初始化 orderData
				cid: "", // canvasId，页面存在多个条形码组件时需设置不同的ID
				show: "", // 默认使用组件中的image标签显示条形码
				format: "code128", // 条形码类型 code128\code39\ean13\ean8\upc\itf14	
				val: "FB19A1650-100S", // 要生成的内容
				unit: "px", // 单位
				onval: "", // 监听val值变化自动重新生成条形码
				loadMake: "", // 组件初始化完成后自动生成条形码，val需要有值
				opations: {
					// format: "CODE128",//选择要使用的条形码类型 微信支持的条码类型有 code128\code39\ena13\ean8\upc\itf14\
					width: 1.5, //设置条之间的宽度
					height: 48, //高度
					displayValue: true, //是否在条形码下方显示文字
					// text: "FB19A1650-100S",//覆盖显示的文本
					textAlign: "center", //设置文本的水平对齐方式
					textPosition: "bottom", //设置文本的垂直位置
					textMargin: 0, //设置条形码和文本之间的间距
					fontSize: 16,//设置文本的大小
					// fontColor: "#0000ef",//设置文本的颜色
					// lineColor: "#0000ef",//设置条形码的颜色
					background: "#FFFFFF", //设置条形码的背景色
					margin: 0, //设置条形码周围的空白边距
					// marginTop: 10,//设置条形码周围的上边距
					// marginBottom: 20,//设置条形码周围的下边距
					// marginLeft: 30,//设置条形码周围的左边距
					// marginRight: 40,//设置条形码周围的右边距
				},
			}
		},

		onLoad(options) {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('orderDetailData', (data) => {
				console.log("接收到的订单数据:", data);
				this.orderData = data; // 存到 data 里
			});
		},
		methods: {
			barresult() {
				console.log('生成条形码图片')
			},
			submit() {
				this.$store.dispatch('updateSumPrice', this.orderData.deal);
				this.$store.dispatch('updateOrderList', this.orderData)
				const order2 = this.orderData
				const encodedOrder = encodeURIComponent(JSON.stringify(order2))

				uni.navigateTo({
					url: `/pages/payment/payment?order=${encodedOrder}`
				});
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>



<style scoped lang="scss">
	.page-container {
		background-color: #f6f7f9;
		min-height: 100vh;
		overflow: hidden;

		.box-container {
			background-color: #ffffff;
			margin: 24rpx;
			border-radius: 16rpx;
			padding: 24rpx 32rpx;

			.order-cell {
				font-size: 26rpx;
				line-height: 54rpx;
				border-bottom: 1px solid #e1e1e1;
				margin-bottom: 18rpx;
				padding-bottom: 18rpx;

				&:last-child {
					border: 0;
					margin-bottom: 0rpx;
				}

				.order-price {
					display: flex;
					justify-content: space-between;

				}

				.order-time {
					background-color: #cfe9ff;
					color: #0071d5;
					padding: 2rpx 12rpx;
					width: fit-content;
					margin-top: 24rpx;
				}

				.order-text {
					font-size: 28rpx;
					line-height: 50rpx;
				}


				.select_box {
					display: flex;
					margin-bottom: 18rpx;

					&:last-child {
						margin-bottom: 0rpx;
						padding-bottom: 0rpx;
					}

					.pic {
						width: 64rpx;
						height: 64rpx;
						overflow: hidden;
					}

					.select-info {
						flex: 1;
						display: flex;

						.info {
							flex: 2;
							align-items: center;
							overflow: hidden;

							.title {
								font-size: 28rpx;
								color: #333333;
								height: auto;
								font-weight: 500;
								display: flex;

								.status-value {
									margin-left: 12rpx;
								}
							}
						}
					}
				}
			}
		}

		.box-container-button {
			margin: 24rpx;
			border-radius: 16rpx;
			overflow: hidden;
		}

	}
</style>